<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css">
    <title>单客户分析</title>
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <link rel="stylesheet" href="css/card.css">
    <style>
        .myColor{color: rgb(102,102,102);}
    </style>
</head>
<body>

<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <input style="display: none" id="custId" name="custId">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="custName" name="custName" autocomplete="off"
                               placeholder="点击选择客户" class="layui-input" required lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始月份</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" id="=startTime" class="layui-input datetime"
                               placeholder="(包含此月)" required lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">终止月份</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endTime" class="layui-input datetime"
                               placeholder="(不包含此月)" required lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon">&#xe666;</i> 重载数据</a>
                </div>
                <label class=" layui-text">(数据默认一年内,不包括当前所在月份)</label>
            </form>
        </div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
                <div class="layui-row layui-col-md8">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>客户信息状态</div>
                            <div class="layui-card-body">
                                <div class="layui-row layui-col-space10">
                                    <div class="layui-col-xs2">
                                        <div class="panel layui-bg-number">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <h5 >客户来源</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h4 class="no-margins myColor" id="custSource">----</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs2">
                                        <div class="panel layui-bg-number">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <h5>所属行业</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h4 class="no-margins myColor" id="custIndustry">----</h4>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs2">
                                        <div class="panel layui-bg-number">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <h5>客户级别</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h4 class="no-margins myColor" id="custLevel">----</h4>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs2">
                                        <div class="panel layui-bg-number">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <h5>客户状态</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h4 class="no-margins myColor" id="custStatus">----</h4>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs2">
                                        <div class="panel layui-bg-number">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <h5>商机状态</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h4 class="no-margins myColor" id="businessStatus">----</h4>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs2">
                                        <div class="panel layui-bg-number">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                    <h5>客户性质</h5>
                                                </div>
                                                <div class="panel-content">
                                                    <h4 class="no-margins myColor" id="custProperty">----</h4>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!--echarts-->
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-bar-chart icon"></i>跟进频率+合同金额（直方图）</div>
                            <div class="layui-card-body">
                                <div id="main" style="width: 100%;height:400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row ">
                        <div class="layui-col-xs6">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="fa fa-user icon"></i>客户评分(平均)</div>
                                <div class="layui-card-body " style="color: rgb(102,102,102);">
                                    <h1 id="custScoreAvg">----</h1>
                                    <small>评价次数:<span id="custNum"> --</span></small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="fa fa-street-view icon"></i>公司评分(平均)</div>
                                <div class="layui-card-body" style="color: rgb(102,102,102);">
                                    <h1 id="selfScoreAvg">----</h1>
                                     <small>评价次数:<span  id="selfNum"> --</span></small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="fa fa-jpy icon"></i>涉及金额</div>
                                <div class="layui-card-body" style="color: rgb(102,102,102);">
                                    <h1 id="money">--</h1>
                                    <small>合作次数:<span id="contractNum"> --</span></small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="fa fa-pie-chart icon"></i>跟进方式饼状图</div>
                                <div class="layui-card-body">
                                    <div id="wayPie" style="width: 100%;min-height: 140px">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>-->

<script src="lib/layui-v2.5.5/layui.all.js" charset="utf-8"></script>
<script src="js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="js/lay-module/tableSelect/tableSelect.js"></script>
<script>
    layui.use(['form', 'layer', 'laydate','echarts'], function () {
        var form = layui.form;
        //form.render();
        var tableSelect = layui.tableSelect;
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts,
            laydate = layui.laydate;

        $('.datetime').each(function () {
            laydate.render({
                elem: this       //使用this指向当前元素,不能使用class名, 否则只有第一个有效
                , type: 'month'
            });
        });
        /*var xAxisData = [];
        var contractData = [];
        var followFreData = [];*/
        tableSelect.render({
            elem: '#custName',
            checkedKey: 'id',
            searchKey: 'custName',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '客户名搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {
                url: 'customerList',
                request: {
                    pageName: 'page', //页码的参数名称，默认：pageNum
                    limitName: 'pageSize' //每页数据量的参数名，默认：pageSize
                },
                parseData: function (res) { //res 即为原始返回的数据
                    //res.code=0;
                    console.log(res);
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.rows //解析数据列表
                    };
                },
                cols: [
                    [
                        {type: 'radio'},
                        {field: 'custId', title: 'ID'},
                        {field: 'custName', title: '客户名'},
                        {field: 'custLinkman', title: '联系人'},
                        {field: "custUserId", title: '负责人'}
                    ]
                ]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.custName);
                    $("#custId").val(item.custId);
                    getData({"custId":item.custId});
                });
                elem.val(NEWJSON.join(","))
            }
        });
        form.on("submit(data-search-btn)",function (data) {
            if(data.field.custId == null) {
                layer.msg("请先选择客户",{time:2000});
            } else {
                data = data.field;
                getData(data);
            }

        });
        function getData(data){
            $.ajax({
                url:"one/getAllSingleData",
                data:data,
                type:"post",
                success:function (result) {
                    console.log(result);
                    $("#custSource").html(result.custSource);
                    $("#custIndustry").html(result.custIndustry);
                    $("#custLevel").html(result.custLevel);
                    $("#custProperty").html(result.custProperty);
                    $("#businessStatus").html(result.businessStatus);
                    $("#custStatus").html(result.custStatus);
                    $("#custScoreAvg").html(result.custScoreAvg);
                    $("#custNum").html(result.custNum);
                    $("#selfScoreAvg").html(result.selfScoreAvg);
                    $("#selfNum").html(result.selfNum);
                    $("#money").html(result.money);
                    $("#contractNum").html(result.contractNum);
                    if(result.custScoreAvg == undefined) $("#custScoreAvg").html("无");
                    if(result.custNum == undefined) $("#custNum").html(0);
                    if(result.selfScoreAvg == undefined) $("#selfScoreAvg").html("无");
                    if(result.selfNum == undefined) $("#selfNum").html(0);
                }
            });
            $.ajax({
                url: "one/getOneBarData",
                data: data,
                type: "post",
                success: function (result) {
                    var xAxisData = [];
                    var contractData = [];
                    var followFreData = [];
                    var contractBar = result.contractBar;
                    var followFreBar = result.followFreBar;
                    //xAxisData.length = 0;
                    for(var i in contractBar){
                        xAxisData.push(i);
                        contractData.push(contractBar[i])
                    }
                    for(var i in followFreBar){
                        followFreData.push(followFreBar[i])
                    }
                    myChart.setOption({
                        xAxis: {
                            data: xAxisData
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '跟进频率',
                            data: followFreData
                        },{
                            name: '合同金额',
                            data: contractData
                        }
                        ]
                    });
                }
            });
            $.ajax({
                url: "one/getWayPieData",
                data: data,
                type: "post",
                success: function (result) {
                    myChart1.setOption({
                        legend: {
                            data: result.content
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '跟进方式',
                            data: result.pieData
                        }
                        ]
                    });
                }
            });
        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '跟进频率和合同金额'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['跟进频率', '合同金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                //boundaryGap: false,
                //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                data:["2019-04","2019-05","2019-06","2019-07","2019-08","2019-09","2019-10","2019-11","2019-12","2020-01","2020-02","2020-03"],
                //data:xAxisData
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '跟进频率',
                    type: 'bar',
                    //tack: '总量',
                    data: [12,1,0,10,17,23,15,11,13,5],
                    //data:increaseData,
                    itemStyle: {
                        color: 'rgb(51,152,219)'
                    }
                },
                {
                    name: '合同金额',
                    type: 'bar',
                    //stack: '总量',
                    data: [0,100,0,100,0,230,150,110,130,50]
                    //data:decreaseData
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        var myChart1 = echarts.init(document.getElementById('wayPie'));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '跟进方式',
                //subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['电话', '电子邮件', '实际走访', '信件']
            },
            series: [
                {
                    name: '跟进方式',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '电话'},
                        {value: 310, name: '电子邮件'},
                        {value: 234, name: '实际走访'},
                        {value: 135, name: '信件'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);

    })
</script>
</body>
</html>
